<template>
  <div>
    <el-row style="background-color: #f7f8fB;line-height: 40px;color: #999999;font-size: 16px">
      <el-col :span="2" :offset="3" ><i class="el-icon-s-home" style="font-size: 18px"></i>&nbsp;<span @click="shou">商城首页</span></el-col>
      <el-col :span="1" :offset="11">异议反馈</el-col>
      <el-col :span="1"><i class="el-icon-phone-outline">客户服务</i></el-col>
      <el-col :span="1">我的商城</el-col>
      <el-col :span="1">消息推送</el-col>
    </el-row>
    <el-row >
      <el-col :span="5" :offset="2" style="font-size: 40px;font-family: fangsong;margin-top: 36px;font-weight: 800">
         <span id="text">12306铁路</span>
      </el-col>
      <el-col :span="2" style="font-size: 26px;margin-top: 45px;margin-left: -160px">
        <span style="font-weight: 600">购物车</span>
      </el-col>
      <el-col :span="4" :offset="3" style="margin-top: 30px">
        <el-input placeholder="请输入内容" style="width: 500px;" v-model="sou">
          <template slot="append">
            <el-button style="background-color: #3b99fc;color: white;border-radius: 0;width: 90px;font-size: 16px" @click="chazhao">搜索</el-button>
          </template>
        </el-input>
        <br><br>
        <a style="color: #666666">德玛仕厨房设备</a>
        <a style="color: #666666;margin-left: 20px">全棉时代女工卫生用品</a>
      </el-col>
      <el-col :span="4" :offset="2">
        <el-button style="background-color: #f7f8fb;border-radius: 20px;margin-top: 35px;width: 150px;height: 45px" @click="TiaoOrder">我的订单</el-button>
      </el-col>
    </el-row>
    <div style="background-color:#febecf;margin-top: 20px">
      <div style="width: 1350px;border-radius: 20px;margin-bottom: 76px;display:inline-block;margin-top: 50px;margin-left: -50px;border: 3px solid #f6f6f6;background-color: white" >
        <el-row>
          <el-col :span="5" style="line-height: 60px;margin-top: 10px;font-size: 28px;font-weight: 700;font-family: cursive;margin-left: 20px">
            <span style="color: #F58100">购物车(全部&nbsp;<span style="color:red;font-size: 30px">{{numAll}}</span>&nbsp;件)</span>
          </el-col>
          <el-col :span="5" :offset="13">
            <el-button @click="clear" style="margin-top: 20px;margin-left: 20px;width: 130px;color: white;background-color: #f58100;font-size: 18px;border-radius: 15px">清空购物车</el-button>
          </el-col>
        </el-row>
        <hr>
        <el-row style="height: 70px;margin-top: 30px">
          <el-col :span="3">
            <div>
              <el-checkbox v-model="isChecked" label="label"  @change="onCheckChange">
                <span style="font-size: 18px;font-weight: 600">全选</span>
              </el-checkbox>
            </div>
          </el-col>
          <el-col :span="7" style="margin-top: -5px"><span style="font-size: 18px;font-weight: 600">商品信息</span></el-col>
          <el-col :span="2" :offset="1" style="margin-top: -5px"><span style="font-size: 18px;font-weight: 600">单价</span></el-col>
          <el-col :span="4" style="margin-top: -5px"><span style="font-size: 18px;font-weight: 600">数量</span></el-col>
          <el-col :span="2" style="margin-top: -5px"><span style="font-size: 18px;font-weight: 600">总价</span></el-col>
          <el-col :span="4" style="margin-top: -5px"><span style="font-size: 18px;font-weight: 600">操作</span></el-col>
        </el-row>
        <el-empty description="还没有商品哦,快去添加吧" v-if="cartList.length==0">
          <el-button style="margin-top: 50px;background-color: #5199FD;color: white;border-radius: 15px" @click="liulan">浏览商品</el-button>
        </el-empty>

        <div style="height: 250px"  v-for="(cart, index) in cartList" :key="index">
          <el-row :style="gaibian(cart)">
            <el-col :span="1" style="margin-top: 20px"><el-checkbox v-model="cart.checked" @change="onCheckChangeOne(cart)"></el-checkbox></el-col>
            <el-col :span="4" style="margin-top: 20px"><img :src="cart.cartGpic" width="150px" height="150px"></el-col>
            <el-col :span="4" style="font-weight: 600;font-size: 20px;margin-top: 30px">商品名称:</el-col>
            <el-col :span="3" style="text-indent: 40px;text-align: left;word-wrap: break-word;font-weight: 600;font-size: 20px;margin-left: -140px;margin-top: 90px">{{cart.cartGname}}</el-col>
            <el-col :span="2" style="font-weight: 600;font-size: 20px;margin-top: 80px;margin-left: 80px;color: red">￥{{cart.cartGprice}}.00</el-col>
            <el-col :span="3" style="font-weight: 600;font-size: 20px;margin-top: 80px;margin-left: 40px">{{cart.cartNum}}</el-col>
            <el-col :span="2" style="font-weight: 600;font-size: 20px;margin-top: 80px;margin-left: 30px;color: red">￥{{cart.cartNum*cart.cartGprice}}.00</el-col>
            <el-col :span="4" style="margin-left: 10px">
              <el-button style="margin-top: 50px;background-color: #5199FD;color: white;border-radius: 15px" @click="cha(cart.goodsId)">查看详情</el-button><br>
              <el-button style="margin-top: 30px;background-color: red;color: white;border-radius: 15px" @click="deleteOne(cart.goodsId)">删除商品</el-button></el-col>
          </el-row>
        </div>
        <div class="fixed-row" style="z-index: 10;background-color: #daeff5;border-radius: 20px">
          <el-row>
            <el-col :span="4" style="line-height: 80px;">
              <el-checkbox v-model="isChecked" label="label"  @change="onCheckChange">
                <span style="font-size: 18px;font-weight: 600">全选</span>
              </el-checkbox>
            </el-col>
            <el-col :span="3" :offset="9" style="line-height: 80px;font-size: 20px">已选择商品&nbsp;<span style="color: red;font-size: 26px;font-weight: 700">{{ chooseNum }}</span>&nbsp;件</el-col>
            <el-col :span="7" style="line-height: 80px;margin-left: -40px;font-size: 20px">合计(不含运费)&nbsp;:&nbsp;<span style="color: red;font-size: 24px;font-weight: 700">￥{{ choosePrice }}.00</span></el-col>
            <el-col :span="3" style="line-height: 70px;margin-left: -100px;font-size: 20px">
              <el-button style="width: 100px;color: white;background-color: red;font-size: 18px;border-radius: 15px" v-if="chooseNum!=0"  @click="jiesuan">结算</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "goodsCart",
  data(){
    return{
      sou:'',
      cartList:[],
      numAll:0,
      isChecked: false,
      chooseNum:0,
      choosePrice:0,
      goodsIds:[],
      number:[],
      address:''
    }
  },
  methods:{
    findAll(){
      this.$axios.get('/cart/findAllByUid').then(res=>{
          this.cartList=res.data.data;
          this.numAll = this.cartList.length
      })
    },
    liulan(){
      this.$router.push('/goods')
    },
    chazhao(){
      if (this.sou==''){
        return
      }
      this.$axios.get('/goods/selectLike',{params:{src:this.sou}}).then(res=>{
        this.$router.push({path:'/goodsList',query: {data:res.data.data}})
      })
    },
    gaibian(cart){
      if (!cart.checked){
        return{
          borderRadius: '20px',
          marginLeft: '40px',
          width:'95%',
          height: '200px',
          backgroundColor: '#f6f6f6',
        }
      }else {
        return{
          borderRadius: '20px',
          marginLeft: '40px',
          width:'95%',
          height: '200px',
          backgroundColor: '#ffe1e9'
        }
      }
    },
    clear(){
      this.$axios.get('/cart/deleteAll').then(res=>{
        localStorage.setItem('numAll',0)
        location.reload()
      })
    },
    jiesuan(){
        console.log(this.goodsIds)
        console.log(this.number)
          const data = {
            gid: this.goodsIds,
            num: this.number,
            addr: this.address
          };
        this.$axios.post('/gorder/insertAll', data).then(res=>{
             if(res.data.code==200){
                  this.$router.push('/goodsOrder')
             }
          })
    },
    TiaoOrder(){
      this.$router.push('/goodsOrder')
    },
    onCheckChange(checked) {
      if (checked){
        this.chooseNum = this.cartList.length
        this.choosePrice = 0
        this.goodsIds = []
        this.number = []
        for (let i = 0; i < this.cartList.length; i++) {
          this.cartList[i].checked=true;
          this.goodsIds.push(this.cartList[i].goodsId);
          this.number.push(this.cartList[i].cartNum)
          this.choosePrice+=this.cartList[i].cartNum*this.cartList[i].cartGprice
        }
      }else {
        this.chooseNum = 0
        this.choosePrice = 0
        this.goodsIds = []
        this.number = []
        for (let i = 0; i < this.cartList.length; i++) {
          this.cartList[i].checked=false;
        }
      }
    },
    onCheckChangeOne(cart) {
      if (cart.checked) {
          this.chooseNum++
          this.goodsIds.push(cart.goodsId);
          this.number.push(cart.cartNum);
          this.choosePrice += cart.cartNum*cart.cartGprice
        // 如果被选中，执行某些操作
      }else {
        this.chooseNum--
        //用过滤的方法删除数组中的值
        this.goodsIds = this.goodsIds.filter(item => item !== cart.goodsId);
        this.number = this.number.filter(item => item !== cart.cartNum);
        this.choosePrice -= cart.cartNum*cart.cartGprice
      }
    },
    changeColor(){
      const text = document.getElementById("text");
      setInterval(()=> {
        text.style.color = this.getRandomColor()
      }, 200); // 在这里，1000表示1000毫秒，你可以根据需要设置颜色改变的速度
    },
    cha(id){
      this.$router.push({path:'/goodsItem',query:{key:id}})
    },
    getRandomColor(){
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },
    shou(){
      this.$router.push('/goods')
    },
    deleteOne(id){
      this.$axios.get('/cart/deleteOne',{params:{gid:id}}).then(res=>{
        alert("删除成功!")
        location.reload()
      })
    }
  },
  mounted() {
    this.changeColor()
    this.findAll()
    this.address = localStorage.getItem("adds")
  },
}
</script>
<style scoped>
.fixed-row {
  position: fixed;
  bottom: 0;
  width: 1355px; /* 使元素占满屏幕宽度 */
  /* 可根据需要添加其他样式 */
  height: 80px;
  background-color: white;
  margin-left: -5px;
  border: 3px solid lavender;
  border-radius: 5px;
}
</style>
<script setup>

</script>
